<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <link rel="stylesheet" type="text/css" href="css/animations.css">
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" href="css/mypage.css"/>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script src="js/mypage.js"></script>

</head>
<body>
 <audio id="play" src="flo.mp3" preload="auto" autoplay="autoplay" style="display: none"></audio>
    <div data-role="page" id="page1" class="page page1">
        <div data-role="content" class="content">
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <img class="imgp01 pt-page-rotateCarouselRightIn" src="images/02.png">
                </div>
                <div class="ui-block-b">
                    <ul class="ulpage1">
                        <li  class="name pt-page-moveFromTopFade" >
                            陈汉聪
                        </li>
                        <li class="liview l1 pt-page-moveFromRightFade" id="l1">
                            HOME
                        </li>
                        <li class="liview l2 pt-page-moveFromLeftFade" id="l2">
                            个人标签
                        </li>
                        <li class="liview l3 pt-page-moveFromRightFade" id="l3">
                            职业技能
                        </li>
                    </ul>
                </div>
            </div>
            <div class="ui-grid-solo pt-page-moveFromTopFade">
                <div class="ui-block-a">
                    <p class="title pt-page-moveFromTopFade pt-page-delay500">ABOUT ME</p>
                    <p class="pt-page-moveFromLeftFade pt-page-delay1000"><span class="tig">Professional：</span> <span class="ban">信息与计算科学</span></p>
                    <p class="pt-page-moveFromRightFade pt-page-delay1000"><span class="tig">Mail：</span><span class="ban">q245219311@live.com</span></p>
                    <p class="pt-page-moveFromLeftFade pt-page-delay1000"><span class="tig">WeiXin：</span><span class="ban">q245219311</span></p>
                    <p class="pt-page-moveFromRightFade pt-page-delay1000"><span class="tig">Interest：</span><span class="ban">IT 摄影</span></p>
                </div>
            </div>
            <img class="imgup pt-page-moveIconUp " src="images/icon_up.png">

        </div>
    </div>

    <div data-role="page" id="page2" class="page page2">
        <div data-role="content" class="content">
            <div class="ui-grid-b r2">
                <div class="ui-block-a bq"><img class="imgp1 pt-page-rotateCubeBottomIn " src="images/zx.png" ></div>
                <div class="ui-block-b bq"><img class="imgp1 pt-page-rotateCubeTopIn " src="images/lg.png" ></div>
                <div class="ui-block-c bq"><img class="imgp1 pt-page-rotateCubeBottomIn " src="images/wm.png" ></div>
            </div>
            <div class="ui-grid-b r3">
                <div class="ui-block-a"><div class="tbrl pt-page-moveFromLeftFade pt-page-delay1000">因为热爱编程并且在逐渐充实自己所以充满自信。</div></div>
                <div class="ui-block-b"><div class="tbrl pt-page-moveFromBottomFade pt-page-delay1000">对于困难挫折与其抱怨担忧不如乐观对待,寻求可行方法。</div></div>
                <div class="ui-block-c"><div class="tbrl pt-page-moveFromRightFade pt-page-delay1000">一件事要么不做，要做就做到最极限。</div></div>
            </div>
        </div>
        <img class="imgup pt-page-moveIconUp" src="images/icon_up.png">
    </div>

    <div data-role="page" id="page3" class="page page3">

        <div data-role="content" class="content">
            <div class="ui-grid-solo">

                <div class="ui-block-a r1 pt-page-moveFromTopFade">
                    <h1 class="title">掌握技能</h1>
                </div>


                <div class="ui-block-a pt-page-moveFromLeft pt-page-delay300">
                    <p>C/C++</p>
                </div>


                <div class="ui-block-a pt-page-moveFromLeft pt-page-delay500">
                    <p>js/jquery</p>
                </div>


                <div class="ui-block-a pt-page-moveFromLeft pt-page-delay700 ">
                    <p>jquery mobile+phonega</p>
                </div>


                <div class="ui-block-a pt-page-moveFromLeft pt-page-delay1000  ">
                    <p>Sqlsever</p>
                </div>

                <div class="ui-block-a pt-page-rotateCubeBottomIn pt-page-delay1000 ">
                    <p class="never"> And nerver stop learning...</p>
                </div>

            </div>
        </div>
        <img class="imgup pt-page-moveIconUp" src="images/icon_up.png">

    </div>



</body>
</html>